<template>
<mk-content>
  <div class="edit">
    <el-card class="edit-card">
      <template #header>
        <el-tooltip
            effect="dark"
            content="更改视频名称"
            placement="top">
          <el-input></el-input>
        </el-tooltip>
      </template>
      <div>
        <img width="100%" src="https://public-server.aimeike.tv/theme/10090/thumbnail.jpg" alt="">
      </div>
      <cell-group>
        <Cell title="视频模板">
          <template #right-icon>
            <i class="el-icon-edit"></i>更换模板
          </template>
        </Cell>
        <Cell title="模板滤镜" >
          <template #right-icon>
            <i class="el-icon-magic-stick"></i>
          </template>
        </Cell>
        <Cell title="添加配音" >
          <template #right-icon>
            <i class="el-icon-microphone"></i>
          </template>
        </Cell>
        <Cell title="估计时长" >
          <template #right-icon>
            300s
          </template>
        </Cell>
      </cell-group>
      <el-button type="primary">
        预览
      </el-button>
      <div>
        <el-button>
          保存
        </el-button>
      </div>
    </el-card >

    <el-card class="edit-card">
      <el-scrollbar class="elscrollbar">
        {{ data }}
        <draggable
            v-model="data"
            ghostClass="ghost"
            class="list"
            :animation="0">
          <editBox v-for="(item,index) in data" :key="item.type"
                   :type="item.type"
                   class="item">
          </editBox>
        </draggable>
      </el-scrollbar>
      <Divider>
        拖动素材可以更换顺序
      </Divider>
    </el-card>
  </div>
</mk-content>
</template>

<script>
import draggable from 'vuedraggable'
import Cell from 'vant/lib/cell'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'
import editBox from "../components/editBox";
import Divider from 'vant/lib/divider'
import  'vant/lib/divider/style'
export default {
  name: "editVideo",
  components:{CellGroup,Cell,draggable,editBox,Divider},
  data(){
    return{
      data:[{
        type:'img'
      },{
        type: 'video'
      },{
        type:'text'
      }]
    }
  }
}
</script>

<style scoped>
.elscrollbar{
  /*height: 100%;*/
  height: calc(100vh - 100px);

}
.edit-card{
  height: calc(100vh - 100px);
}
.el-scrollbar__wrap{
  overflow-x: hidden;
}
.ghost:after{
  display: block;
  content: "";
  width: 100%;
  height: 180px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #F2F2F2;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, .3), 0 0 6px rgba(0, 0, 0, .2);
}
.list{
  display: flex;
  flex-wrap: wrap;
}

.el-button{
  width: 100%;
  margin-bottom: 10px;
}
.edit{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
}
.edit .edit-card:nth-of-type(1){
  width: 300px;
}
.edit .edit-card:nth-of-type(2){
  width: calc(100% - 320px);
}
</style>